// 剪裁插件使用步骤
// 1.初始化 -> 得到一个剪裁框
let image = $('#image')
let option = {
  // 纵横比(宽高比)
  aspectRatio: 1, // 正方形
  // 指定预览区域
  preview: '.img-preview' // 指定预览区的类名（选择器）
}
image.cropper(option)

// 2.调用方法
// 裁剪插件方法:image.cropper('方法名',方法参数)

// 3.点击上传
$('button:contains("上传")').on('click', function () {
  // 触发文件域的单击事件
  $('#file').trigger('click')

})

// 4.文件域内容改变,更换裁剪图片
$('#file').on('change', function () {

  if (this.files.length > 0) {
    // 获取文件对象
    let fileObj = this.files[0]
    // 创建url
    let url = URL.createObjectURL(fileObj)
    // 更换裁剪区图片
    image.cropper('replace', url)
  }
})

// 5.点击确认,裁剪图片,转换格式,ajax提交
$('button:contains("确定")').on('click', function () {
  // 剪裁
  let canvas = image.cropper('getCroppedCanvas', { width: 30, height: 30 })
  // console.log(canvas);
  // 转成 base64 格式
  let str = canvas.toDataURL('image/*', 0.5)
  console.log(str);
  // var base64 = canvas.toDataURL();
  // ajax提交
  $.ajax({
    type: 'POST',
    url: '/my/user/avatar',
    data: { avatar: str },
    // data: { avatar: base64 },
    success: function (res) {
      layer.msg(res.message)
      if (res.status === 0) {
        window.parent.getUserInfo()
      }
    }

  })
})


